<template>
  <div class="wms-item-category-search">
    <ElCard shadow="never" class="search-card">
      <ElForm
        ref="searchFormRef"
        :model="searchForm"
        :inline="true"
        label-width="80px"
        class="search-form"
      >
        <ElRow :gutter="16">
          <ElCol :lg="6" :md="8" :sm="12" :xs="24">
            <ElFormItem label="分类名称" prop="categoryName">
              <ElInput
                v-model="searchForm.categoryName"
                placeholder="请输入分类名称"
                clearable
                @keyup.enter="handleSearch"
              />
            </ElFormItem>
          </ElCol>

          <ElCol :lg="6" :md="8" :sm="12" :xs="24">
            <ElFormItem label="分类编码" prop="categoryCode">
              <ElInput
                v-model="searchForm.categoryCode"
                placeholder="请输入分类编码"
                clearable
                @keyup.enter="handleSearch"
              />
            </ElFormItem>
          </ElCol>

          <ElCol :lg="6" :md="8" :sm="12" :xs="24">
            <ElFormItem label="状态" prop="status">
              <ElSelect
                v-model="searchForm.status"
                placeholder="请选择状态"
                clearable
              >
                <ElOption label="正常" :value="1" />
                <ElOption label="停用" :value="0" />
              </ElSelect>
            </ElFormItem>
          </ElCol>

          <ElCol :lg="6" :md="8" :sm="12" :xs="24">
            <ElFormItem>
              <ElButton type="primary" @click="handleSearch">
                <ElIcon><Search /></ElIcon>
                搜索
              </ElButton>
              <ElButton @click="handleReset">
                <ElIcon><Refresh /></ElIcon>
                重置
              </ElButton>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </ElCard>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";
import { Search, Refresh } from "@element-plus/icons-vue";

defineOptions({ name: "WmsItemCategorySearch" });

// Props
const filter = defineModel<{
  categoryName?: string;
  categoryCode?: string;
  status?: number;
}>("filter", { required: true });

// Emits
const emit = defineEmits<{
  search: [params: any];
  reset: [];
}>();

// 搜索表单
const searchForm = reactive({
  categoryName: "",
  categoryCode: "",
  status: undefined as number | undefined,
});

// 监听外部过滤条件变化
watch(
  filter,
  (newFilter) => {
    Object.assign(searchForm, newFilter);
  },
  { immediate: true, deep: true },
);

// 搜索处理
const handleSearch = () => {
  // 更新外部filter
  Object.assign(filter.value, searchForm);
  emit("search", { ...searchForm });
};

// 重置处理
const handleReset = () => {
  searchForm.categoryName = "";
  searchForm.categoryCode = "";
  searchForm.status = undefined;

  Object.assign(filter.value, searchForm);
  emit("reset");
};
</script>

<style lang="scss" scoped>
.wms-item-category-search {
  margin-bottom: 16px;

  .search-card {
    :deep(.el-card__body) {
      padding: 16px;
    }
  }

  .search-form {
    margin-bottom: -10px;

    .el-form-item {
      margin-bottom: 16px;
    }
  }
}
</style>
